<template>
  <div class="newsDetails">
    <Header :fixed="true">
      <van-icon name="arrow-left" slot="left" />
      <div slot="title">发送验证码</div>
    </Header>
    <div class="code-box">
        <div class="tit">短信验证码已发送，请填写验证码</div>
        <div class="content">
            <van-field label="手机号" v-model="form.mobilePhone" placeholder="手机号" class="mtop14" readonly />
            <van-field label="验证码" v-model="form.securityCode" placeholder="请输入验证码" class="mtop14" />
            <van-button class="login-btn" round color="linear-gradient(to right, #5694cf, #53a9e0)" size="large" @click="onSave">完 成</van-button>
            <p class="info" @click="getCode">{{ verShow ? timer + ' s 后重新获取' : '未收到验证码？'}}</p>
        </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header'
import { sendSecurityCode, doRegister } from '@/api/user'
export default {
  name: 'code',
  data () {
    return {
      form: {
          securityCode: '',
          mobilePhone: '',
          userName: '',
          passWord: ''
      },
      verShow: false,
      timer: 60
    }
  },
  components: {
    Header
  },
  created () {
      let info = sessionStorage.getItem('info')
      if (info) {
          let data = JSON.parse(info)
          this.form.mobilePhone = data.mobilePhone
          this.form.userName = data.userName
          this.form.passWord = data.passWord
          this.getCode()
      }
  },
  mounted () {
    
  },
  watch: {
    
  },
  mounted () {
  },
  methods: {
    async getCode () {
      let { data } = await sendSecurityCode({mobilePhone: this.form.mobilePhone, sendType: 'register'})
      if (data.result == 'suc') {
        this.timer = 60
        this.verShow = true;
        var auth_timer = setInterval(()=>{
            this.timer--;
            if(this.timer<=0){
                this.verShow = false;
                clearInterval(auth_timer)
            }
        },1000)
      } else {
          this.$toast(data.msg);
      }
    },
    async onSave () {
        let {data} = await doRegister(this.form)
        if (data.result == 'suc') {
            this.$toast('注册成功，请登录~');
            setTimeout(() => {
                this.$router.push('/login')
            }, 2000)
        } else {
            this.$toast('注册失败，请重试~');
            setTimeout(() => {
                this.$router.push('/register')
            }, 1500)
        }
    }
  }
}
</script>

<style lang="less">
@import '~@/assets/css/index.less';
.newsDetails {
  min-height: 100vh;
}
.code-box {
  padding-top: 70px;
  .tit {
    padding: 12px 0 16px 10%;
    font-size: @normal-size;
    color: #ccc;
  }
  .content {
      padding: 0 10% 0 10%;
      .login-btn {
            margin-top: 50px;
        }
        .info {
            margin: 0;
            padding-top: 16px;
            text-align: center;
            color: #ccc;
            font-size: @normal-size;
        }
  }
  .mtop14 {
    margin-top: 14px;
  }
}
</style>